import { onHide } from '@dcloudio/uni-app';
<!--
 * @Description:
 * @Date: 2024-05-14 09:00:16
 * @LastEditTime: 2024-08-26 14:57:19
-->
<route lang="json5" type="mine">
{
  style: {
    navigationBarTitleText: '服务详情',
    navigationBarTextStyle: 'white', //标题栏字体颜色
    navigationBarBackgroundColor: '#0063AF', //标题栏背景色(纯色)
  },
}
</route>
<template>
  <view class="w-screen h-screen flex flex-col p-20rpx box-border bg-#fff">
    <div class="info flex">
      <div class="info-basic">
        <div class="flex">
          <span>{{ `${currentRole === 'leader' ? '预约人姓名' : '检察官'}：` }}</span>
          <span>
            {{ currentRole === 'leader' ? state.basicInfo.name : state.basicInfo.acceptUserName }}
          </span>
        </div>
        <div class="flex">
          <span>预约日期：</span>
          <span>{{ state.basicInfo.acceptTime }}</span>
        </div>
        <div class="flex" v-if="state.basicInfo.status === '2'">
          <span>房间号：</span>
          <span>{{ state.basicInfo.meetingNumber }}</span>
        </div>
        <div class="flex" v-if="currentRole === 'leader'">
          <span>联系方式：</span>
          <span>
            {{ state.basicInfo.phone }}
            <wd-icon class="ml-2" name="call" color="#f7b437" @click="handleCall" />
          </span>
        </div>
      </div>
      <div class="info-tag" :style="tagStyle('style')">
        {{ tagStyle('content') }}
      </div>
    </div>
    <div class="divider">预约时段</div>
    <div class="p-20rpx">
      <wd-checkbox-group v-model="state.basicInfo.requestTime" shape="square" disabled>
        <wd-checkbox modelValue="9:00 ~ 10:30">9:00 ~ 10:30</wd-checkbox>
        <wd-checkbox modelValue="10:45 ~ 12:00">10:45 ~ 12:00</wd-checkbox>
        <wd-checkbox modelValue="14:00 ~ 15:30">14:00 ~ 15:30</wd-checkbox>
        <wd-checkbox modelValue="15:45 ~ 17:00">15:45 ~ 17:00</wd-checkbox>
      </wd-checkbox-group>
    </div>
    <div class="divider">接访内容</div>
    <div class="p-20rpx pt-0">
      <div>
        <span>事情描述</span>
        <wd-textarea
          v-model="state.basicInfo.content"
          clearable
          placeholder="请输入..."
          :maxlength="300"
          show-word-limit
          readonly
        />
      </div>
      <div>
        <span>诉求期望</span>
        <wd-textarea
          v-model="state.basicInfo.desire"
          clearable
          placeholder="请输入..."
          :maxlength="300"
          show-word-limit
          readonly
        />
      </div>
      <div>
        <span>相关文件</span>
        <br />
        <div class="mt-2" style="color: blue" @click="handleDownload">
          {{ state.fileObj && state.fileObj.name }}
        </div>
      </div>
    </div>
  </view>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store'
import { useToast } from 'wot-design-uni'
import { getInterviewAPI, getFileistAPI } from '@/service/index/foo'

onShow(() => {
  currentRole.value = userStore.userInfo.currentRole
})

onLoad((options) => {
  getInterviewAPI(options.id).then((res) => {
    console.log('on load', res)
    state.basicInfo = res.data
  })
  getFileistAPI({ businessId: options.id, businessType: 'jieFang' }).then((res) => {
    state.fileObj = res.data.list[0]
  })
})

const toast = useToast()
const baseurl = import.meta.env.VITE_SERVER_BASEURL
const userStore = useUserStore()
const currentRole = ref('')
const filesList = ref([])

const state = reactive({
  basicInfo: {},
  fileObj: {},
})

function tagStyle(type) {
  const status = state.basicInfo.status
  const styleObj = {
    1: {
      color: '#e75000',
      background: '#fff0db',
    },
    2: {
      color: '#002af6',
      background: '#dbf4ff',
    },
    3: {
      color: '#f70b00',
      background: '#ffede7',
    },
    4: {
      color: '#6b6b6b',
      background: '#f0f0f0',
    },
  }
  const contentObj = {
    1: '审核中',
    2: '审核通过',
    3: '审核驳回',
  }
  return type === 'style'
    ? {
        color: styleObj[status]?.color,
        background: styleObj[status]?.background,
      }
    : contentObj[status]
}

// 文件保存
function handleDownload() {
  // 文件url 文件名 文件后缀
  uni.showLoading({ title: '加载中…', mask: true })

  const downloadTask = uni.downloadFile({
    url: `${baseurl}${state.fileObj.url}`,
    success: function (res) {
      console.log('downloadFile 成功', res)
      const tempFilePath = res.tempFilePath // 下载成功后的临时文件路径
      uni.openDocument({
        filePath: tempFilePath, // 打开新的文件路径
        showMenu: true,
        success: function (res) {
          console.log('openDocument 成功', res)
          uni.hideLoading()
        },
        fail: function (err) {
          console.log('openDocument 失败', err)
          uni.hideLoading()
        },
      })
    },
    fail: function (res) {
      console.log('downloadFile 失败', res)
      uni.hideLoading()
    },
  })
}

// 拨打电话
function handleCall() {
  uni.makePhoneCall({
    phoneNumber: state.basicInfo.phone, // 电话号码
  })
}
</script>
<style lang="scss" scoped>
.info {
  display: flex;
  padding: 0px 16px;
  &-basic {
    display: flex;
    flex-direction: column;
  }
  &-tag {
    height: 18px;
    padding: 4px 16px;
    // display: flex;
    // align-items: center;
    // height: 22px;
    // padding: 4px 16px;
    margin-left: auto;
    font-size: 14px;
    font-weight: 400;
    border-radius: 20px;
  }
}

.divider {
  padding: 4px 16px;
  margin: 8px 0px;
  font-weight: bold;
  background-color: #e9f3ff;
}

.wd-textarea {
  background-color: #f9f9f9;
}
::v-deep .wd-textarea__inner {
  background-color: #f9f9f9;
}
</style>
